﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucHomePage.ascx.cs" Inherits="UserControl_ucHomePage" %>


    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
        $(function() {
            var current = 1;

            var iterate = function() {
                var i = parseInt(current + 1);
                var lis = $('#rotmenu').children('li').size();
                if (i > lis) i = 1;
                display($('#rotmenu li:nth-child(' + i + ')'));
            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate, 6000);

            $('#rotmenu li').bind('hover', function(e) {
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });

            function display(elem) {
                var $this = elem;
                var repeat = false;
                if (current == parseInt($this.index() + 1))
                    repeat = true;

                if (!repeat)
                    $this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-10px' }, 300, function() {
                        $(this).animate({ 'opacity': '0.7' }, 700);
                    });

                current = parseInt($this.index() + 1);

                var elem = $('a', $this);

                elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);

                var info_elem = elem.next();
                $('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function() {
                    $('h1', $(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
                });

                $('#rot1 .description').animate({ 'bottom': '-270px' }, 500, 'easeOutCirc', function() {
                    $('p', $(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
                })
                $('#rot1').prepend(
                    $('<img/>', {
                        style: 'opacity:0',
                        className: 'bg'
                    }).load(
                    function() {
                        $(this).animate({ 'opacity': '1' }, 600);
                        $('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function() {
                            $(this).remove();
                        });
                    }
                ).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '956').attr('height', '360')
                );
            }
        });
    </script>

<div class="Post">
    <div class="Post-tl">
    </div>
    <div class="Post-tr">
    </div>
    <div class="Post-bl">
    </div>
    <div class="Post-br">
    </div>
    <div class="Post-tc">
    </div>
    <div class="Post-bc">
    </div>
    <div class="Post-cl">
    </div>
    <div class="Post-cr">
    </div>
    <div class="Post-cc">
    </div>
    <div class="Post-body">
        <div class="Post-inner">
            <div class="PostContent">
                <h2 class="PostHeaderIcon-wrapper">
                    Mobile Phone Repair Specialists</h2>
                <div id="node-7" class="node Post">
                    <div class="Post-tl">
                    </div>
                    <div class="Post-tr">
                    </div>
                    <div class="Post-bl">
                    </div>
                    <div class="Post-br">
                    </div>
                    <div class="Post-tc">
                    </div>
                    <div class="Post-bc">
                    </div>
                    <div class="Post-cl">
                    </div>
                    <div class="Post-cr">
                    </div>
                    <div class="Post-cc">
                    </div>
                    <div class="Post-body">
                        <div class="Post-inner">
                            <div class="PostHeaderIcons metadata-icons">
                            </div>
                            <div class="PostContent">
                                <div class="article">
                                    <span class="print-link"></span>
                                    <p style="font-size: 30px">
                                        Welcome to the MPR</p>
                                    <p>
                                        &nbsp;</p>
                                    <p>
                                        &nbsp;</p>
                                    <p>
                                        <img alt="CALL US TODAY" height="200" width="610"
                                            src="image/happytohelp.gif"></p>
                                </div>
                            </div>
                            <div class="cleared">
                            </div>
                            <div class="PostFooterIcons metadata-icons">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cleared">
            </div>
        </div>
    </div>
</div>

